<template>
  <el-card v-loading="loading" shadow="hover" style="height: 100%; position: relative">
    <div slot="header" style="text-align: center; font-size: 20px;font-weight: bolder;color: #666; padding: 10px">
      <span>导出验收结果图片</span>
    </div>
    <el-form ref="crForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="选择项目" prop="projectId">
        <el-select v-model="form.projectId" style="width: 100%" filterable clearable placeholder="请选择项目">
          <el-option v-for="(item, index) in projects" :key="index" :label="item.cflastname" :value="item.fid" />
        </el-select>
      </el-form-item>
      <el-form-item label="验收时间" prop="dateRange">
        <el-date-picker
          v-model="form.dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="选择工序">
        <el-input v-model="checkTableSel" readonly>
          <el-button slot="append" icon="el-icon-check" @click="selectProcessVisible = true">选择</el-button>
        </el-input>
      </el-form-item>
      <div style="text-align: center;width: calc(100% - 40px); position: absolute; bottom: 30px">
        <el-button type="primary" @click="exportHandler">导出</el-button>
      </div>
    </el-form>
    <select-process
      :visible.sync="selectProcessVisible"
      :selected.sync="form.checkTableIds"
    />
    <!-- 成功弹窗 -->
    <el-dialog width="800px" title="导出结果" :close-on-click-modal="false" :visible.sync="exportResultVisible">
      <el-row>
        <el-col :span="8">
          <div class="export-rs-icon">
            <i class="el-icon-success" />
          </div>
          <div class="export-rs-msg">
            <span>导出成功</span>
          </div>
        </el-col>
        <el-col :span="2" />
        <el-col :span="14">
          <p>文件导出成功，请前往服务器中自行下载所需文件</p>
          <p>文件位置：</p>
          <p class="file-path">{{ picturePath }}</p>
        </el-col>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
import { downloadCheckResultFile } from '@/api/statement/exportFile'
import SelectProcess from '@/views/components/SelectProcess'
import moment from 'moment'
export default {
  name: 'FilterForm',
  components: {
    SelectProcess
  },
  props: {
    projects: { type: Array, default: () => [] }
  },
  data() {
    return {
      form: {
        projectId: '',
        checkTableIds: [],
        dateRange: []
      },
      rules: {
        projectId: [
          { required: true, message: '请选择项目', trigger: 'blur' }
        ],
        dateRange: [
          { required: true, message: '请选择日期范围' }
        ]
      },
      loading: false,
      selectProcessVisible: false,
      exportResultVisible: false,
      picturePath: '',
      pickerOptions: {
        disabledDate: time => {
          return moment(time).isBefore(moment('2021-08-10')) || moment(time).isAfter(moment())
        },
        shortcuts: [{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 360)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    checkTableSel() {
      const checkTableLen = this.form.checkTableIds.length
      if (checkTableLen) {
        return '已选中' + checkTableLen + '道工序'
      } else {
        return '不选默认全部工序'
      }
    }
  },
  methods: {

    /**
     * 导出
     */
    exportHandler() {
      this.$refs.crForm.validate((valid) => {
        if (valid) {
          const params = this.form
          if (!params.projectId) {
            this.$message.error('请选择需要导出的项目')
            return
          }
          params.beginDate = params.dateRange[0]
          params.endDate = params.dateRange[1]
          this.loading = true
          downloadCheckResultFile(params).then(response => {
            if (response.code === 200) {
              this.picturePath = (response.msg.replace('\\', '\/'))
              this.exportResultVisible = true
            } else {
              this.$message.error(response.msg)
            }
          }).catch(msg => {
            this.$message.error(msg)
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.export-rs-icon{
  font-size: 150px;
  color: green;
  text-align: center;
}
</style>
